<template>
  <div class="params-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <div style="margin-top: 15px;">
        <el-alert style="margin:10px  0" title="注意：只允许为第三级分类设置相关参数！" type="warning" show-icon></el-alert>
        <!-- //级联选择器 -->
        选择商品分类：
        <el-cascader
          v-model="value"
          :options="cateCasList"
          :props="props"
          @change="handleChange"
          collapse-tags
          clearable
        ></el-cascader>
        <!-- 标签页 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="动态参数" name="many">
            <el-button type="primary" :disabled="disabled" >添加参数</el-button>
            <el-table :data="manyData" border style="width: 100%">
              <el-table-column type="expand">
                <template slot-scope="scope">
                  <pre>{{scope.row}}</pre>
                  <el-tag
                    v-for="(item,index) in scope.row.attr_vals"
                    :key="index"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(index,scope.row)"
                  >{{item}}</el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="scope.row.inputVisible"
                    v-model="scope.row.inputValue"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm(scope.row)"
                    @blur="handleInputConfirm(scope.row)"
                  ></el-input>
                  <el-button
                    v-else
                    class="button-new-tag"
                    size="small"
                    @click="showInput(scope.row)"
                  >+ New Tag</el-button>
                </template>
              </el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="attr_name" label="日期" width="180"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-edit"
                    @click="handleEdit(scope.row)"
                  >编辑</el-button>
                  <el-button
                    icon="el-icon-delete"
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- 静态属性 -->
          <el-tab-pane label="静态属性" name="only">
            <el-button type="primary" :disabled="disabled">添加属性</el-button>
            <el-table :data="onlyData" border style="width: 100%">
              <el-table-column type="expand">添加属性</el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="attr_name" label="日期" width="180"></el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-edit"
                    @click="handleEdit(scope.row)"
                  >编辑</el-button>
                  <el-button
                    icon="el-icon-delete"
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-card>
  </div>
</template>    
<script>
import {
  cateList_api,
  cateParamsList_api,
  cateParamsDelete_api,
} from "../../api/index.js";
export default {
  data() {
    return {
      // tab栏
      activeName: "many",
      onlyData: [],
      manyData: [],
      // 禁用
      disabled: true,
      // 级联
      cateCasList: [],
      value: [],
      props: {
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      // 标签

    };
  },
  created() {
    this.getParamsCate();
  },
  methods: {
    //   获取数据
    async getParamsCate() {
      const { data: res } = await cateList_api({ type: 3 });
      this.cateCasList = res.data;
    },
    handleChange() {
      if (this.value.length == 3) {
        this.disabled = false;
        this.paramsFunc();
      } else {
        this.disabled = true;
        this.value = [];
      }
    },
    async paramsFunc() {
      var id = this.value[this.value.length - 1];
      var sel = this.activeName;
      const { data: res } = await cateParamsList_api({ id, sel });
      res.data.forEach((item) => {
        item.inputVisible = false;
        item.inputValue = "";
        item.attr_vals = item.attr_vals.split(',').filter(item=>item.length!=0)
      });

      if (this.activeName == "many") {
        this.manyData = res.data;
      } else {
        this.onlyData = res.data;
      }
    },
    handleClick() {
      this.paramsFunc();
    },
    handleEdit() {},
    // 添加参数

    // 删除参数
    async handleDelete(row) {
      const result = await this.$confirm(
        "此操作将永久删除该文件, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除",
        });
      });
      if (result == "confirm") {
        const { data: res } = await cateParamsDelete_api({
          id: row.cat_id,
          attrid: row.attr_id,
        });
        this.paramsFunc();
      }
    },
    // 标签功能
    handleClose(i,row) {
      console.log(row,222);
      row.attr_vals.splice(i, 1);
    },
    showInput(row) {
      row.inputVisible = !row.inputVisible;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    
    handleInputConfirm(row) {
      row.inputVisible = !row.inputVisible;
      let inputValue = row.inputValue;
      if (inputValue) {
        row.attr_vals.push(inputValue);
      }
      row.inputValue = "";
    },
  },
};
</script>
<style scoped lang='less'>
.params-container {
  .el-breadcrumb {
    margin-bottom: 20px;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
}
</style>